import React, { useEffect, useMemo, useState } from 'react'
import style from './Comment.module.scss'
import { getComment } from '../../store/models/comment'
import { useDispatch, useSelector } from 'react-redux'
import type { RootState,AppDispatch } from '../../store/index'
import { Rate } from 'antd';
import classNames from 'classnames'
const Comment:React.FC = () => {
  const dispatch:AppDispatch = useDispatch()
  const commentList = useSelector((state:RootState) => state.comment.commentList)
  const sellerList = useSelector((state:RootState) => state.seller.sellerList)
  const [curIndex,setCurIndex] = useState(0)
  const [isFlag,setIsFlag] = useState(true)
  // console.log(commentList)
  // console.log(sellerList)
  const positive = commentList.filter(v=>v.score > 3)
  const negative = commentList.filter(v => v.score<=3)

  const format = (data:number) => {
    return new Date(data).toLocaleString()
  }

  const ratingList = useMemo(() => {
    return [
      {
        title:'全部',
        data:[...commentList]
      },
      {
        title:'满意',
        data:[...positive]
      },
      {
        title:'不满意',
        data:[...negative]
      }
    ]
  },[commentList])




  useEffect(() => {
    dispatch(getComment())
  },[])

  return (
    <div className={style.box}>
      <header>
        <div className={style.con}>
          <div className={style.left}>
            <h2>{sellerList?.score}</h2>
            <h5>综合评分</h5>
            <p>高于周边商家{sellerList?.rankRate}%</p>

          </div>
          <div className={style.right}>
            <div className={style.server}>
              <span>服务态度</span>
              <Rate disabled defaultValue={4} style={{fontSize:14}}/>
              <span>{sellerList?.serviceScore}</span>
            </div>
            <div className={style.goods}>
              <span>商品评分</span>
              <Rate disabled defaultValue={4} style={{fontSize:14}} />
              <span>{sellerList?.foodScore}</span>
            </div>
            <div className={style.runtime}>
              <span>送达时间</span>
              <span>{sellerList?.deliveryTime}分钟</span>
            </div>
          </div>
        </div>
      </header>
      <div className={style.splite}></div>
      <div className={style.comment}>
        <div className={style.commentHeader}>
          <div className={style.block}>
            {
              ratingList.map((item,index) => 
              <span 
              key={item.title} 
              onClick={() => setCurIndex(index)} 
              className={classNames({[style.active]:curIndex === index})}
              >
                {item.title} 
                ({item.data.length})
              </span>)
            }
          </div>
          <div className={style.rating} onClick={() => setIsFlag(!isFlag)}>
            {
              isFlag?
              <svg tableValues="1736238465110" className="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5065" width="32" height="32"><path d="M512.083915 64.734385c-247.21296 0-447.607415 200.390362-447.607415 447.603322s200.391385 447.608439 447.607415 447.608439c247.208866 0 447.605369-200.393432 447.605369-447.608439C959.687237 265.126794 759.292782 64.734385 512.083915 64.734385zM524.007028 665.571858l-71.565282 70.39968-71.593936-70.39968 0.019444-0.020467L213.850554 501.239419l71.566305-70.421171 167.014653 164.328345L738.750971 313.452701l71.566305 70.422194L524.004981 665.568788 524.007028 665.571858z" fill="#1afa29" p-id="5066"></path></svg>
              :
              <svg tableValues="1736238513063" className="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5314" width="32" height="32"><path d="M512.083915 64.734385c-247.21296 0-447.607415 200.390362-447.607415 447.603322s200.391385 447.608439 447.607415 447.608439c247.208866 0 447.605369-200.393432 447.605369-447.608439C959.687237 265.126794 759.292782 64.734385 512.083915 64.734385zM524.007028 665.571858l-71.565282 70.39968-71.593936-70.39968 0.019444-0.020467L213.850554 501.239419l71.566305-70.421171 167.014653 164.328345L738.750971 313.452701l71.566305 70.422194L524.004981 665.568788 524.007028 665.571858z" fill="#CCCCCC" p-id="5315"></path></svg>
            }
            <span>只看有内容的评价</span>
          </div>
        </div>
        {/* 评论 */}
        <div className={style.commentList}>
        {(isFlag? ratingList[curIndex].data.filter(it => it.text !== ""):ratingList[curIndex].data).map((item,index) =>
          <div key={index} className={style.commentHead}>
            <img src={item.avatar}alt="" />
            <div className={style.commentRight}>
              <div className={style.rightHeader}>
                <div className={style.rightName}>
                  <p>{item.username}</p>
                  <Rate value={ item.score }/>
                </div>
                <span>{format(item.rateTime)}</span>
              </div>
              <p className={style.rightText}>{item.text}</p>
              <div className={style.recommend}>
                {item.rateType === 0 && item.recommend.length !== 0?<i>
                  <svg tableValues="1736240026594" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6826" width="16" height="16"><path d="M844.231111 391.39555600000006H659.9111109999999c-13.653333-2.275556-18.204444-15.928889-20.48-22.755556V202.52444400000002c0-45.511111-36.408889-81.92-81.92-81.92-40.96 0-75.093333 31.857778-81.92 70.542223-25.031111 157.013333-120.604444 209.351111-182.044444 225.28 2.275556 6.826667 2.275556 11.377778 2.275555 15.928889v441.457777c0 9.102222-2.275556 18.204444-6.826666 27.306666999999997h446.008888c43.235556-9.102222 72.817778-25.031111 93.297778-68.266667l93.297778-327.68c18.204444-59.16444400000001-11.377778-116.053333-77.368889-113.77777699999999zM257.137778 876.0888889999999V432.355556c0-13.653333-18.204444-25.031111-38.684445-25.031112H157.013333c-31.857778 0-59.16444400000001 27.306666999999997-59.16444400000001 59.16444500000001v373.191111c0 34.133333 25.031111 61.44 59.16444400000001 61.44h61.44c20.48 0 38.684444-11.377778 38.684445-25.031111z m0 0" fill="#1195db" p-id="6827"></path></svg>
                </i>  : ''}
                {item.recommend.map(it => 
                  <span key={it}>{it}</span>
                )}
              </div>
            </div>
          </div> 
        )}
        </div>
      </div>
    </div>
  )
}

export default Comment